<template>
    <div>
        <el-tree :data="treeData" :show-checkbox="showCheckBox"  @node-click="nodeClick" :props="defaultProps"
            size="large"  node-key="industryId" :default-expand-all="defaultExpandAll" :highlight-current="true"/>
    </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { timeouts } from 'retry'
import { defineProps, defineEmits, watch, computed } from 'vue'
export default {
    props: ['treeData','showCheckBox','defaultExpandAll'],
    emits: ['treeComponent'],
    setup(props,{emit}){
        //参数聚集地
        let valu = reactive({
            data:[],
            backData:null,
            showCheckBox:true,
            defaultExpandAll:false
        })
        //子类接收父类传过的参数
        valu.data = props.treeData
        valu.showCheckBox = props.showCheckBox
        valu.defaultExpandAll = props.defaultExpandAll

        watch(()=>props.treeData,(newVal)=>{
            valu.data = newVal
        })
        //console.log(valu.data)
        //父类组件传参接收
        /* let TableData = defineProps({
            value:{
                type:Boolean
            }
        }) */
        //计算属性，组件需要的数据
        const treeData = computed(()=>valu.data);
        const showCheckBox = computed(()=>valu.showCheckBox)
        const defaultExpandAll = computed(()=>valu.defaultExpandAll)
       
        //事件触发回调函数
        function nodeClick(a,b){
           //只需要传给父组件当前节点的详细属性
           //alert(tree)
           //console.log(a)
           emit('treeComponent',a)
        }
        //监听器
        /* watch(value1.valu,(newVal,oldVal) => {
            console.log(newVal)
        })*/

        /* setTimeout(() =>{
             emit('treeComponent',valu.data);
        },2000)  */
        
        //组件数据格式
        const defaultProps = {
            children: 'industryAccountType',
            label: 'industryName',
        }

        return {
            nodeClick,defaultProps,treeData,showCheckBox,defaultExpandAll
        }
    }
}
</script>

<style>

</style>